<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小米</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
    

<header>


    <nav>
        <div class="top-nav"> 
            <div class="top-left"><button class="logo"></button></div>
            <div class="top-center">
                <ul>
                    <li class="nav-list"><a href="javascript:;" class="nav-list-link">小米手机</a></li>
                    <li class="nav-list"><a href="javascript:;" class="nav-list-link">Redmi 红米</a></li>
                    <li class="nav-list"><a href="javascript:;" class="nav-list-link">电视</a></li>
                    <li class="nav-list"><a href="javascript:;" class="nav-list-link">笔记本</a></li>
                    <li class="nav-list"><a href="javascript:;" class="nav-list-link">家电</a></li>
                    <li class="nav-list"><a href="javascript:;" class="nav-list-link">路由器</a></li>
                    <li class="nav-list"><a href="javascript:;" class="nav-list-link">智能硬件</a></li>
                    <li class="nav-list"><a href="javascript:;" class="nav-list-link">服务</a></li>
                    <li class="nav-list"><a href="javascript:;" class="nav-list-link">社区</a></li>
                </ul>
            </div>
            <div class="top-right">
                <input type="text" class="search-text">
                <input type="button" value="" class="search-btn">
            </div>

        </div>

        <div class="background">
            
            <div class="left-nav">
                <ul class="item-list-ul">
                    <li class="item-list"><a href="" class="list-content">手机 电话卡</a>
                        <div class="item-content">
                            <ul class="goods-list-ul">
                                <li class="goods-list"><img src="images/goods/1.png" alt="" class="">小米9</li>
                                <li class="goods-list"><img src="images/goods/2.png" alt="" class="">小米9</li>
                                <li class="goods-list"><img src="images/goods/3.png" alt="" class="">小米9</li>
                                <li class="goods-list"><img src="images/goods/4.png" alt="" class="">小米9</li>
                                <li class="goods-list"><img src="images/goods/5.png" alt="" class="">小米9</li>
                                <li class="goods-list"><img src="images/goods/6.png" alt="" class="">小米9</li>
                                <li class="goods-list"><img src="images/goods/7.png" alt="" class="">小米9</li>
                                <li class="goods-list"><img src="images/goods/8.png" alt="" class="">小米9</li>
                                <li class="goods-list"><img src="images/goods/9.png" alt="" class="">小米9</li>
                                <li class="goods-list"><img src="images/goods/10.png" alt="" class="">小米9</li>
                                <li class="goods-list"><img src="images/goods/11.jpg" alt="" class="">小米9</li>
                                <li class="goods-list"><img src="images/goods/12.jpg" alt="" class="">小米9</li>
                                <li class="goods-list"><img src="images/goods/13.jpg" alt="" class="">小米9</li>
                                <li class="goods-list"><img src="images/goods/14.jpg" alt="" class="">小米9</li>
                                <li class="goods-list"><img src="images/goods/15.png" alt="" class="">小米9</li>
                                <li class="goods-list"><img src="images/goods/16.jpg" alt="" class="">小米9</li>
                                <li class="goods-list"><img src="images/goods/17.png" alt="" class="">小米9</li>
                                <li class="goods-list"><img src="images/goods/18.jpg" alt="" class="">小米9</li>
                                <li class="goods-list"><img src="images/goods/19.jpg" alt="" class="">小米9</li>
                                <li class="goods-list"><img src="images/goods/20.jpg" alt="" class="">小米9</li>
                                <li class="goods-list"><img src="images/goods/21.jpg" alt="" class="">小米9</li>
                                <li class="goods-list"><img src="images/goods/22.png" alt="" class="">小米9</li>
                                <li class="goods-list"><img src="images/goods/23.jpg" alt="" class="">小米9</li>
                            </ul>
                        </div>
                    </li>
                    <li class="item-list"><a href="" class="list-content">电视盒子</a>
                        <div class="item-content">
                                <ul class="goods-list-ul">
                                        <li class="goods-list"><img src="images/goods/1.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/2.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/3.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/4.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/5.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/6.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/7.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/8.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/9.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/1.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/2.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/3.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/4.png" alt="" class="">小米9</li>

                                    </ul>
                        </div>
                    </li>
                    <li class="item-list"><a href="" class="list-content">笔记本 平板</a>
                        <div class="item-content">
                                <ul class="goods-list-ul">
                                        <li class="goods-list"><img src="images/goods/1.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/2.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/3.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/4.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/5.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/6.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/7.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/8.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/9.png" alt="" class="">小米9</li>

                                    </ul>
                        </div>
                    </li>
                    <li class="item-list"><a href="" class="list-content">家电 插线板</a>
                        <div class="item-content">
                                <ul class="goods-list-ul">
                                        <li class="goods-list"><img src="images/goods/1.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/2.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/3.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/4.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/5.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/6.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/7.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/8.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/9.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/1.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/2.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/3.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/4.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/5.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/6.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/7.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/8.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/9.png" alt="" class="">小米9</li>

                                    </ul>
                        </div>
                    </li>
                    <li class="item-list"><a href="" class="list-content">出行 穿戴</a>
                        <div class="item-content">
                                <ul class="goods-list-ul">
                                        <li class="goods-list"><img src="images/goods/1.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/2.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/3.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/4.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/5.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/6.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/7.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/8.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/9.png" alt="" class="">小米9</li>

                                    </ul>
                        </div>
                    </li>
                    <li class="item-list"><a href="" class="list-content">智能 路由器</a>
                        <div class="item-content">
                                <ul class="goods-list-ul">
                                        <li class="goods-list"><img src="images/goods/1.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/2.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/3.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/4.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/5.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/6.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/7.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/8.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/9.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/1.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/2.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/3.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/4.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/5.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/6.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/7.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/8.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/9.png" alt="" class="">小米9</li>

                                    </ul>
                        </div>
                    </li>
                    <li class="item-list"><a href="" class="list-content">电源 配件</a>
                        <div class="item-content">
                                <ul class="goods-list-ul">
                                        <li class="goods-list"><img src="images/goods/1.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/2.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/3.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/4.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/5.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/6.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/7.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/8.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/9.png" alt="" class="">小米9</li>

                                    </ul>
                        </div>
                    </li>
                    <li class="item-list"><a href="" class="list-content">健康 儿童</a>
                        <div class="item-content">
                                <ul class="goods-list-ul">
                                        <li class="goods-list"><img src="images/goods/1.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/2.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/3.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/4.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/5.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/6.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/7.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/8.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/9.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/1.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/2.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/3.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/4.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/5.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/6.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/7.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/8.png" alt="" class="">小米9</li>
                                        <li class="goods-list"><img src="images/goods/9.png" alt="" class="">小米9</li>

                                    </ul>
                        </div>
                    </li>
                    <li class="item-list"><a href="" class="list-content">耳机 音箱</a>
                        <div class="item-content">9</div>
                    </li>
                    <li class="item-list"><a href="" class="list-content">生活 箱包</a>
                        <div class="item-content">0</div>
                    </li>
                </ul>

            </div>
           
            <div id="photo-list">
                <ul class="photo-list">
                    <li><img src="images/bg1.jpg" alt="" class="photo-item photo-on"></li>
                    <li><img src="images/bg2.jpg" alt="" class="photo-item"></li>
                    <li><img src="images/bg3.jpg" alt="" class="photo-item"></li>
                    <li><img src="images/bg4.jpg" alt="" class="photo-item"></li>
                    <li><img src="images/bg5.jpg" alt="" class="photo-item"></li>
                </ul>
            </div>

            <div id="photo-btn-list">
                <ul class="photo-btn-list">
                    <li><a href="javascript:;" class="photo-btn photo-btn-on"></a></li>
                    <li><a href="javascript:;" class="photo-btn"></a></li>
                    <li><a href="javascript:;" class="photo-btn"></a></li>
                    <li><a href="javascript:;" class="photo-btn"></a></li>
                    <li><a href="javascript:;" class="photo-btn"></a></li>
                </ul>
            </div>

            <div>
                <button id="prev" class="prev"> < </button>
                <button id="next" class="next"> > </button>
            </div>   
        </div>
    </nav>
    <section>
        <div class="header-middle">
            <div class="header-middle-left" >
                    <ul class="header-middle-icon" id="header-middle-icon">
                        <li><a href="" class="header-icon"><br><br><br> 选购手机</a></li>
                        <li><a href="" class="header-icon"><br><br><br> 企业团购</a></li>
                        <li><a href="" class="header-icon"><br><br><br> F码通道</a></li>
                        <li><a href="" class="header-icon"><br><br><br> 米粉卡</a></li>
                        <li><a href="" class="header-icon"><br><br><br> 以旧换新</a></li>
                        <li><a href="" class="header-icon"><br><br><br> 话费充值</a></li>
                    </ul>
            </div>
            <ul class="header-middle-photo">
                <li><img src="images/headermiddle2.jpg" alt="" class="header-middle-img"></li>
                <li><img src="images/headermiddle3.jpg" alt="" class="header-middle-img"></li>
                <li><img src="images/headermiddle4.jpg" alt="" class="header-middle-img"></li>
            </ul>
                
        </div>
        <div> <img src="images/header-bottom.jpg" alt="" class= "header-bottom"></div>
    </section>
    
</header>



<script>

    //引用JQ来排列 goods-list
    $(".item-content").each(function(){
        var oLi = $(this).find(".goods-list"); //保存需要排列的节点
        var width = oLi.width();//获取元素的宽度值
        var height = oLi.height();//获取元素的高度值
        var length = oLi.length;//获取当前二级菜单的li个数
        var col = Math.ceil(length/6);  //向上取整
        $(this).width (col * width);
        
        oLi.each(function(i){
            var x = Math.floor(i/6); //向下取整
            var y = i%6 ;
            $(this).css({
                left:x*width + "px",
                top:y*height + "px"
            })
        });


    });
    



    //获取到图片列表和按钮超链接列表
    var pList = document.getElementById("photo-list").getElementsByTagName("img")
    var btnList = document.getElementById("photo-btn-list").getElementsByTagName("a")
    //要显示图片的索引
    var index = 0;
    //上一张，下一张按钮
    var prev = document.getElementById("prev");
    var next = document.getElementById("next");
    //用js控制图标点击效果
    var a = document.getElementById ("header-middle-icon").getElementsByTagName("a");

    window.onload = () => {
        //用js控制图标点击效果
        for (let i = 0; i < a.length; i++) {
            a[i].style.background = "url('../images/" + (i+1) + "-1.png') no-repeat center";
            a[i].style.backgroundSize = '60%';
            a[i].onmouseenter = () => {
                a[i].style.background = "url('../images/" + (i+1) + ".png') no-repeat center";
                a[i].style.backgroundSize = '60%';
            }
            a[i].onmouseout = () => {
                a[i].style.background = "url('../images/" + (i+1) + "-1.png') no-repeat center";
                a[i].style.backgroundSize = '60%';
            }
        }

        // 按钮超链接被点击的状态所执行的函数 
        for (let i = 0; i < btnList.length; i++) {
            btnList[i].onclick = () => {
                index = i ; 
                moveImg(pList,index);
                moveBtn(btnList,index);
            }
        }
        
        //按钮执行事件，多利用箭头函数，方便简洁
        prev.onclick = () => {
            if ( index === 0 ) { index = btnList.length } 
            index --;
            moveImg(pList,index);
            moveBtn(btnList,index);
        }
        next.onclick = () => {
            index ++;
            if ( index === btnList.length ) { index = 0 } 
            moveImg(pList,index);
            moveBtn(btnList,index);

        }
    }
        // 图片渐变出现函数
        function moveImg(pList,index){
            for (let i = 0; i < btnList.length; i++) {
                pList[i].className = 'photo-item';
            }
            pList[index].className = 'photo-item photo-on'
        }
        // 超链接变色函数
        function moveBtn(btnList,index){
            for (let i = 0; i < btnList.length; i++) {
                btnList[i].className = 'photo-btn';
            }
            btnList[index].className = 'photo-btn photo-btn-on'
        }

</script>

</body>

</html>